<template>
  <div class="container">
    <div id="chart_2" class="echarscss"></div>
  </div>
</template>

<script>
import echarts from "echarts";
require("echarts/theme/macarons"); // echarts theme
export default {
  data() {
    return {};
  },
  mounted() {
    this.getDataPie();
  },
  methods: {
    getDataPie() {
      let cw = document.documentElement.clientWidth;
      let ch = document.documentElement.clientHeight;
      let w = cw * 0.25 + "px";
      let h = ch * 0.28 + "px";
      document.getElementById("chart_2").style.width = "100%";
      document.getElementById("chart_2").style.height = h;

      var myChart = echarts.init(document.getElementById("chart_2"));
      var giftImageUrl =
        "";
      myChart.setOption({
        title: {
          text: "业务办理量统计",
          textStyle: {
            // 标题内容的样式
            color: "#000", // 京东红
            fontSize: 18 // 主题文字字体大小，默认为18px
          },
           left: "center",
          padding: [  1,  10,  10,  10, ]
        },
        tooltip: {
          trigger: "item",
          formatter: "{b} : {c} ({d}%)"
        },

        grid: {
         
          top: "1%",
          bottom: "1%",
          containLabel: true
        },

        series: {
          type: "pie",
          radius: [30, "50%"],
          center: ["50%", "50%"],
          roseType: "radius",
          color: [
            "#C1232B",
            "#B5C334",
            "#FCCE10",
            "#E87C25",
            "#27727B",
            "#FE8463",
            "#9BCA63",
            "#FAD860",
            "#F3A43B",
            "#60C0DD",
            "#D7504B",
            "#C6E579",
            "#F4E001",
            "#F0805A",
            "#26C0C0"
          ],
          data: [
            {
              value: 20,
              name: "建设项目环境影响后评价备案"
            },
            {
              value: 10,
              name: "一类放射性物品启运备案"
            },
            {
              value: 19,
              name: "在野外进行放射性同位素示踪试验审批"
            },
            {
              value: 18,
              name: "废弃电器电子产品拆解情况审核"
            },
            {
              value: 17,
              name: "固体废物跨省贮存、处置审批"
            },
            {
              value: 19,
              name: "废弃电器电子产品处理企业资格审批"
            },
            {
              value: 35,
              name: "贮存危险废物超过一年的批准"
            },
            {
              value: 40,
              name: "防治污染设施拆除或闲置审批"
            },
            {
              value: 8,
              name: "江河、湖泊新建、改建或者扩大排污口审核"
            },
            {
              value: 16,
              name: "企事业单位突发环境事件应急预案备案"
            }
          ],
          label: {
            normal: {
              textStyle: {
                fontSize: 14
              },
              formatter(v) {
                // let text = v.name + "" + Math.round(v.percent) + "%" + "";
                  let text = v.name;
                if (text.length <= 8) {
                  return text;
                } else if (text.length > 8 && text.length <= 16) {
                  return (text = `${text.slice(0, 8)}\n${text.slice(8)}`);
                } else if (text.length > 16 && text.length <= 24) {
                  return (text = `${text.slice(0, 8)}\n${text.slice(
                    8,
                    16
                  )}\n${text.slice(16)}`);
                } else if (text.length > 24 && text.length <= 30) {
                  return (text = `${text.slice(0, 8)}\n${text.slice(
                    8,
                    16
                  )}\n${text.slice(16, 24)}\n${text.slice(24)}`);
                } else if (text.length > 30) {
                  return (text = `${text.slice(0, 8)}\n${text.slice(
                    8,
                    16
                  )}\n${text.slice(16, 24)}\n${text.slice(
                    24,
                    30
                  )}\n${text.slice(30)}`);
                }
              }
            }
          },
          labelLine: {
            normal: {
              smooth: true,
              lineStyle: {
                width: 2
              }
            }
          },
          itemStyle: {
            normal: {
              shadowBlur: 30,
              shadowColor: "rgba(0, 0, 0, 0.4)"
            }
          },

          animationType: "scale",
          animationEasing: "elasticOut",
          animationDelay: Math.random() * 200
        }
      });
    }
  }
};
</script>
<style lang='scss' scoped>
.container {
  width: 100%;
  height: 100%;
  .echarscss {
    width: 100%;
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    margin: 0 auto;
  }
}
</style>
